<template>
  <div class="home_page">
    <div class="page_menu">
      <div class="page_logo flex_center">
          <img src="https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/blog/src/chatroom/avatar/default4.jpg" alt="">
          <span>MyAdmin</span>
      </div>
      <Menu theme="light" :active-name="activeMenu" :open-names="openNames" @on-open-change="menuChange">
        <Submenu :name="menuItem.name" v-for="(menuItem, menuIndex) in menuList" :key="menuIndex">
          <template slot="title">
            <Icon :type="menuItem.icon" />
            {{menuItem.title}}
          </template>
          <menu-item :name="item.route" :to="item.route" v-for="(item,index) in menuItem.items" :key="index">{{item.name}}</menu-item>
        </Submenu>
      </Menu>
    </div>
    <div class="page_view">
      <div class="page_header">
        <div class="page_header_refresh flex_center" title="刷新页面" @click="$router.go(0)">
          <Icon type="md-repeat"/>
        </div>
        <div class="flex_align_center page_header_breadcrumb">
          <Breadcrumb v-if="activeTab !== ''">
            <BreadcrumbItem v-for="(item, index) in tabsRouterObj[activeTab].matched" :key="index">{{item.meta.name}}</BreadcrumbItem>
          </Breadcrumb>
        </div>
        <Dropdown placement="bottom-end" slot="extra" @on-click="onAdministratorDropdown">
          <div class="page_administrator flex_center">
            <img src="https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/blog/src/chatroom/avatar/default3.jpg" alt="">
            <span>Administrator</span>
          </div>
          <DropdownMenu slot="list">
            <DropdownItem :name="0"><Icon type="ios-log-out" size="18"/>退出登录</DropdownItem>
          </DropdownMenu>
        </Dropdown>

      </div>
      <div class="page_tabs">
        <Tabs type="card" :closable="tabsRouterList.length > 1" @on-tab-remove="tabRemove" @on-click="tabClick" v-model="activeTab" :draggable="true"  @on-drag-drop="handleDragDrop">
          <TabPane v-if="tabsRouterList.length > 0" v-for="(item,index) in tabsRouterList" :key="index" :label="item.meta.name" :name="item.path"></TabPane>
          <Dropdown placement="bottom-end" slot="extra" @on-click="onMenuChoseTab">
            <Button  icon="ios-arrow-down"></Button>
            <DropdownMenu slot="list">
              <DropdownItem :name="0"><Icon type="md-arrow-back" />关闭左侧</DropdownItem>
              <DropdownItem :name="1"><Icon type="md-arrow-forward" />关闭右侧</DropdownItem>
              <DropdownItem :name="2"><Icon type="md-close" />关闭其他</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </Tabs>
      </div>
      <div class="page_router">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
    import { Component, Vue, Watch} from 'vue-property-decorator';
    interface matchedObj {
        name: string,
        meta: string
    }
    @Component
    export default class HelloWorld extends Vue {
        openNames: string[] = ['0']
        activeMenu: string = '';
        activeTab: string = '';
        tabsRouterObj: any = {};
        tabsRouterList: any[] = [];
        menuList: any[] = [
            {
                title: '系统',
                name: '0',
                icon: 'md-globe',
                items: [
                    {
                        name: '控制台',
                        route: '/console'
                    }
                ]
            },
            {
                title: '测试',
                name: '1',
                icon: 'ios-paper',
                items: [
                    {
                        name: 'test',
                        route: '/test'
                    },
                    {
                        name: 'about',
                        route: '/about'
                    },
                    {
                        name: '404',
                        route: '/404'
                    }
                ]
            }
        ]
        @Watch('$route')
        routeChange(to :any, from :any) {
            console.log(to,from)
            if (to.path === from.path) {
                return
            }
            this.handleTab(to)
        }
        /**
         * 计算tab数据
         */
        handleTab(route :any): void {
            if (route.meta.notTab) {
                return
            }
            this.activeMenu = route.path;
            this.activeTab = route.path;
            let matched: matchedObj[] = route.matched.reduce((matched: matchedObj[], val: any): matchedObj[] => {
                matched.push({
                    name: val.name,
                    meta: val.meta
                });
                return matched
            }, []);
            let meta = {...route.meta};
            if (meta.paramsName) {
                meta.name = meta.name + `(${route.params[meta.paramsName]})`
            } else {
                let keys = Object.keys(route.params);
                if (keys.length !== 0){
                    meta.name = meta.name + `(${route.params[keys[0]]})`
                }
            }
            let routeItem = {
                meta,
                path: route.path,
                params: route.params,
                query: route.query,
                matched
            };
            this.$set(this.tabsRouterObj, route.path, routeItem);
            this.tabsRouterList = [];
            setTimeout(() => {
                this.tabsRouterList = Object.values(this.tabsRouterObj);
                window.sessionStorage.setItem('ls_tabsRouterList', JSON.stringify(this.tabsRouterList))
            }, 0);
        }
        /**
         * 侧边菜单操作
         */
        menuChange(openNames :string[]) :void{
            window.sessionStorage.setItem('ls_openNames', JSON.stringify(openNames))
        }
        /**
         * tab点击
         */
        tabClick(openName :string) :void{
            if (this.$route.path === openName || this.$route.path === openName) {
                return
            }
            this.$router.push(openName)
        }
        /**
         * 移除tab
         */
        tabRemove(name: string) :void {
            delete this.tabsRouterObj[name];
            console.log(this.activeTab , name)
            if (this.activeTab !== this.$route.path) {
                this.$router.push(this.activeTab)
            }
        }
        /**
         * 右侧操作菜单
         * @param name
         */
        onMenuChoseTab(name :number) {
            let index :number = -1;
            let tabsRouterList :any[]= []
            switch (name) {
                case 0:
                case 1:
                    for (let i = 0; i < this.tabsRouterList.length; i++) {
                        if (this.tabsRouterList[i].path === this.activeTab){
                            index = i;
                            break
                        }
                    }
                    if (index === -1){
                        return
                    }
                    if (name === 0){
                        tabsRouterList = this.tabsRouterList.slice(index)
                    } else {
                        tabsRouterList = this.tabsRouterList.slice(0, index + 1)
                    }
                    break;
                case 2:
                    tabsRouterList = [this.tabsRouterObj[this.activeTab]]
            }
            this.tabsRouterList = tabsRouterList;
            this.changeTabsRouterObj(tabsRouterList);
            window.sessionStorage.setItem('ls_tabsRouterList',JSON.stringify(tabsRouterList))
        }
        /**
         * tab拖动
         */
        handleDragDrop(name :string, newName :string, a :number, b :number) {
            this.tabsRouterList.splice(b, 1, ...this.tabsRouterList.splice(a, 1 , this.tabsRouterList[b]));
        }
        onAdministratorDropdown(name :number){
            if (name === 0) {
                this.$Message.info('退出登录')
            }
        }
        /**
         * 数组转对象
         * @param tabsRouterList
         */
        changeTabsRouterObj(tabsRouterList :any[]) :void {
            this.tabsRouterObj = tabsRouterList.reduce( (tabsRouterObj :any, val :any) :any => {
                tabsRouterObj[val.path] = val;
                return tabsRouterObj
            }, {});
        }
        created() {
            const openNames = window.sessionStorage.getItem('ls_openNames');
            const tabsRouterList = window.sessionStorage.getItem('ls_tabsRouterList');
            if (openNames && tabsRouterList) {
                this.openNames = JSON.parse(openNames);
                this.tabsRouterList = JSON.parse(tabsRouterList);
                this.changeTabsRouterObj(this.tabsRouterList);
            }
            this.handleTab(this.$route)
        }
    }
</script>
<style scoped lang="less">
  .home_page{
    width:100%;
    height:100%;
    display: flex;
  }
  .page_menu{
    border-right: 1px solid #dcdee2;
    overflow-y: auto;
    box-sizing: border-box;
    overflow-x: hidden;
    min-width: 240px;
    .page_logo{
      width: 100%;
      padding: 5px;
      box-sizing: border-box;
      overflow: hidden;
      .page_logo_w{
        width: 100%;
      }
      img{
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      span{
        color: #006bbf;
        font-weight: bold;
        font-size: 18px;
      }
    }
  }
  .page_view{
    flex: 1;
    display: flex;
    flex-direction: column;
    .page_header{
      padding: 10px;
      display: flex;
      overflow: hidden;
      background: #F8F8F9;
      .page_header_refresh{
        padding: 5px;
        font-size: 20px;
        cursor: pointer;
        &:hover{
          color: #006bbf;
        }
      }
      .page_header_breadcrumb{
        padding-left: 10px;
        flex: 1;
        display: flex;
        align-items: center;
      }
      .page_administrator{
        cursor: pointer;
        padding: 0 10px;
        img{
          width: 30px;
          border-radius: 100%;
          margin-right: 5px;
        }
        &:hover{
          color: #006bbf;
        }
      }
    }
    .page_tabs{
      padding: 5px 10px 0 10px;
      box-sizing: border-box;
    }
    .page_router{
      flex: 1;
      padding: 0 10px 10px 10px;
      box-sizing: border-box;
    }
  }
</style>
